<template>
  <PageWrapper dense contentBackground contentFullHeight>
    <div class="h-full bg-white" :class="prefixCls">
      <HTabs v-model:active="type" class="px-6" :dataSource="columns2" @change="changeType" />
      <template v-if="type === 'TENANT_EMAIL_CONFIG'">
        <messageReminder />
      </template>
      <template v-else-if="type === 'TENANT_BASE_INFO_CONFIG'">
        <systemResource />
      </template>
      <template v-else-if="type === 'TENANT_FILE_SERVER_CONFIG'">
        <fileServes />
      </template>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { HTabs } from '/@/components/HTabs';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { columns2 } from './config.data';

  import messageReminder from '../messageReminder/index.vue';
  import systemResource from '../systemResource/index.vue';
  import fileServes from '../fileServes/index.vue';

  const isUpdate = ref(false);

  export default defineComponent({
    name: 'TenantConfig',
    components: {
      // fileServes,
      // systemResources,
      // subMsg,
      // subDingDing,
      // subEmaill,
      messageReminder,
      systemResource,
      fileServes,
      PageWrapper,
      HTabs,
    },
    setup() {
      const { prefixCls } = useDesign('tenant-config');

      // const formSchema
      const type = ref(columns2[0].value);

      const changeType = async ({ value }) => {
        type.value = value;
        isUpdate.value = false;
      };

      return {
        type,
        columns2,
        prefixCls,

        changeType,

        isUpdate,
      };
    },
  });
</script>

<style lang="less">
  .message-content {
    width: 100%;
  }
  @prefix-cls: ~'@{namespace}-tenant-config';

  .@{prefix-cls} {
    // background-color: @background-color-light;
    .vben-basic-form {
      &[disabled='true'] {
        .ant-form-item-label {
          label {
            color: @text-color-call-out;
          }
        }
      }

      .ant-input-number-disabled,
      .ant-input-affix-wrapper-disabled {
        // background-color: transparent;
        color: #333;

        > .ant-input[disabled] {
          color: #333;
        }
      }
    }
  }
</style>
